<template>
  <div class="case-evaluation">
    <!-- 页面头部 -->
    <header class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">案件评价</h1>
          <p class="page-subtitle">{{ caseInfo.title }} - {{ caseInfo.caseNumber }}</p>
        </div>
        <div class="case-status completed">
          <i class="fas fa-check-circle"></i>
          案件已完成
        </div>
      </div>
    </header>

    <!-- 案件摘要 -->
    <div class="case-summary">
      <div class="summary-card">
        <div class="case-info">
          <div class="info-item">
            <span class="label">案件类型：</span>
            <span class="value">{{ caseInfo.type }}</span>
          </div>
          <div class="info-item">
            <span class="label">负责律师：</span>
            <span class="value">{{ caseInfo.lawyer }}</span>
          </div>
          <div class="info-item">
            <span class="label">办结日期：</span>
            <span class="value">{{ formatDate(caseInfo.completedDate) }}</span>
          </div>
          <div class="info-item">
            <span class="label">总耗时：</span>
            <span class="value">{{ caseInfo.duration }}天</span>
          </div>
        </div>
        <div class="case-result">
          <div class="result-title">案件结果</div>
          <div class="result-content">
            <div class="result-item">
              <span class="result-label">获赔金额：</span>
              <span class="result-value success">¥{{ formatCurrency(caseInfo.compensation) }}</span>
            </div>
            <div class="result-item">
              <span class="result-label">伤残等级：</span>
              <span class="result-value">{{ caseInfo.disabilityLevel }}</span>
            </div>
            <div class="result-item">
              <span class="result-label">责任比例：</span>
              <span class="result-value">对方{{ caseInfo.liability }}%责任</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 评价表单 -->
    <div class="evaluation-form">
      <div class="form-card">
        <h2 class="form-title">
          <i class="fas fa-star text-yellow-500"></i>
          请为本次服务进行评价
        </h2>

        <!-- 总体满意度 -->
        <div class="rating-section">
          <h3 class="section-title">总体满意度</h3>
          <div class="star-rating">
            <div 
              v-for="star in 5" 
              :key="`overall-${star}`"
              class="star-item"
              :class="{ 'active': star <= evaluation.overallRating }"
              @click="setRating('overallRating', star)"
            >
              <i class="fas fa-star"></i>
            </div>
            <span class="rating-text">
              {{ getRatingText(evaluation.overallRating) }}
            </span>
          </div>
        </div>

        <!-- 专业能力评价 -->
        <div class="rating-section">
          <h3 class="section-title">专业能力</h3>
          <div class="star-rating">
            <div 
              v-for="star in 5" 
              :key="`professional-${star}`"
              class="star-item"
              :class="{ 'active': star <= evaluation.professionalRating }"
              @click="setRating('professionalRating', star)"
            >
              <i class="fas fa-star"></i>
            </div>
            <span class="rating-text">
              {{ getRatingText(evaluation.professionalRating) }}
            </span>
          </div>
        </div>

        <!-- 服务态度评价 -->
        <div class="rating-section">
          <h3 class="section-title">服务态度</h3>
          <div class="star-rating">
            <div 
              v-for="star in 5" 
              :key="`service-${star}`"
              class="star-item"
              :class="{ 'active': star <= evaluation.serviceRating }"
              @click="setRating('serviceRating', star)"
            >
              <i class="fas fa-star"></i>
            </div>
            <span class="rating-text">
              {{ getRatingText(evaluation.serviceRating) }}
            </span>
          </div>
        </div>

        <!-- 响应速度评价 -->
        <div class="rating-section">
          <h3 class="section-title">响应速度</h3>
          <div class="star-rating">
            <div 
              v-for="star in 5" 
              :key="`response-${star}`"
              class="star-item"
              :class="{ 'active': star <= evaluation.responseRating }"
              @click="setRating('responseRating', star)"
            >
              <i class="fas fa-star"></i>
            </div>
            <span class="rating-text">
              {{ getRatingText(evaluation.responseRating) }}
            </span>
          </div>
        </div>

        <!-- 评价留言 -->
        <div class="comment-section">
          <h3 class="section-title">评价留言</h3>
          <el-input
            v-model="evaluation.comment"
            type="textarea"
            :rows="4"
            placeholder="请分享您对本次服务的具体感受和建议..."
            maxlength="500"
            show-word-limit
          />
        </div>

        <!-- 标签选择 -->
        <div class="tags-section">
          <h3 class="section-title">服务特点（可多选）</h3>
          <div class="tags-grid">
            <div 
              v-for="tag in serviceTags" 
              :key="tag.value"
              class="tag-item"
              :class="{ 'selected': evaluation.tags.includes(tag.value) }"
              @click="toggleTag(tag.value)"
            >
              <i :class="tag.icon"></i>
              {{ tag.label }}
            </div>
          </div>
        </div>

        <!-- 是否推荐 -->
        <div class="recommend-section">
          <h3 class="section-title">是否愿意推荐给朋友？</h3>
          <div class="recommend-options">
            <label class="recommend-option">
              <input 
                type="radio" 
                v-model="evaluation.wouldRecommend" 
                value="yes"
              >
              <span class="option-content">
                <i class="fas fa-thumbs-up text-green-500"></i>
                愿意推荐
              </span>
            </label>
            <label class="recommend-option">
              <input 
                type="radio" 
                v-model="evaluation.wouldRecommend" 
                value="maybe"
              >
              <span class="option-content">
                <i class="fas fa-meh text-yellow-500"></i>
                可能推荐
              </span>
            </label>
            <label class="recommend-option">
              <input 
                type="radio" 
                v-model="evaluation.wouldRecommend" 
                value="no"
              >
              <span class="option-content">
                <i class="fas fa-thumbs-down text-red-500"></i>
                不会推荐
              </span>
            </label>
          </div>
        </div>

        <!-- 打赏功能 -->
        <div class="reward-section">
          <h3 class="section-title">
            <i class="fas fa-gift text-red-500"></i>
            表达心意（可选）
          </h3>
          <p class="reward-desc">如果您对我们的服务非常满意，可以给予律师一些心意表达</p>
          
          <div class="reward-options">
            <div 
              v-for="amount in rewardAmounts" 
              :key="amount"
              class="reward-option"
              :class="{ 'selected': evaluation.rewardAmount === amount }"
              @click="setReward(amount)"
            >
              <span class="amount">¥{{ amount }}</span>
            </div>
            <div 
              class="reward-option custom"
              :class="{ 'selected': evaluation.isCustomAmount }"
              @click="toggleCustomAmount"
            >
              <span class="amount">自定义</span>
            </div>
          </div>

          <div v-if="evaluation.isCustomAmount" class="custom-amount">
            <el-input-number
              v-model="evaluation.customAmount"
              :min="1"
              :max="10000"
              :step="10"
              controls-position="right"
              placeholder="输入金额"
            />
          </div>

          <div v-if="evaluation.rewardAmount > 0 || evaluation.customAmount > 0" class="reward-note">
            <i class="fas fa-info-circle text-blue-500"></i>
            <span>打赏金额将直接转给负责律师，表达您的感谢之意</span>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="form-actions">
          <el-button size="large" @click="saveDraft">
            <i class="fas fa-save mr-2"></i>保存草稿
          </el-button>
          <el-button 
            type="primary" 
            size="large" 
            @click="submitEvaluation"
            :disabled="!canSubmit"
          >
            <i class="fas fa-check mr-2"></i>提交评价
          </el-button>
        </div>
      </div>
    </div>

    <!-- 历史评价 -->
    <div class="history-section" v-if="historyEvaluations.length > 0">
      <h2 class="history-title">我的历史评价</h2>
      <div class="history-list">
        <div 
          v-for="history in historyEvaluations" 
          :key="history.id"
          class="history-item"
        >
          <div class="history-header">
            <div class="case-info">
              <span class="case-number">{{ history.caseNumber }}</span>
              <span class="case-type">{{ history.caseType }}</span>
            </div>
            <div class="rating-display">
              <div class="stars">
                <i 
                  v-for="star in 5" 
                  :key="star"
                  class="fas fa-star"
                  :class="{ 'active': star <= history.rating }"
                ></i>
              </div>
              <span class="rating-score">{{ history.rating }}.0</span>
            </div>
          </div>
          <div class="history-content">
            <p class="comment">{{ history.comment }}</p>
            <div class="history-meta">
              <span class="lawyer">{{ history.lawyer }}</span>
              <span class="date">{{ formatDate(history.evaluatedAt) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

export default {
  name: 'CaseEvaluation',
  setup() {
    const route = useRoute()
    const router = useRouter()

    // 案件信息
    const caseInfo = reactive({
      id: route.params.id || '1',
      title: '沪C88976机动车追尾交通事故人身损害赔偿案',
      caseNumber: 'TA20240118001',
      type: '交通事故责任纠纷',
      lawyer: '李卫民律师',
      completedDate: '2024-02-20',
      duration: 65,
      compensation: 285600,
      disabilityLevel: '九级',
      liability: 80
    })

    // 评价数据
    const evaluation = reactive({
      overallRating: 0,
      professionalRating: 0,
      serviceRating: 0,
      responseRating: 0,
      comment: '',
      tags: [],
      wouldRecommend: '',
      rewardAmount: 0,
      isCustomAmount: false,
      customAmount: 0
    })

    // 预设打赏金额
    const rewardAmounts = [50, 100, 200, 500, 1000]

    // 服务标签
    const serviceTags = [
      { label: '专业负责', value: 'professional', icon: 'fas fa-graduation-cap' },
      { label: '沟通及时', value: 'responsive', icon: 'fas fa-comments' },
      { label: '耐心细致', value: 'patient', icon: 'fas fa-heart' },
      { label: '经验丰富', value: 'experienced', icon: 'fas fa-award' },
      { label: '高效处理', value: 'efficient', icon: 'fas fa-rocket' },
      { label: '收费合理', value: 'reasonable', icon: 'fas fa-dollar-sign' },
      { label: '结果满意', value: 'satisfied', icon: 'fas fa-thumbs-up' },
      { label: '值得信赖', value: 'trustworthy', icon: 'fas fa-shield-alt' }
    ]

    // 历史评价
    const historyEvaluations = ref([
      {
        id: 1,
        caseNumber: 'TA20231015002',
        caseType: '合同纠纷',
        lawyer: '王律师',
        rating: 5,
        comment: '王律师非常专业，帮我成功解决了合同纠纷问题，沟通及时，效率很高。',
        evaluatedAt: '2023-11-20'
      }
    ])

    // 计算是否可以提交
    const canSubmit = computed(() => {
      return evaluation.overallRating > 0 && 
             evaluation.professionalRating > 0 && 
             evaluation.serviceRating > 0 && 
             evaluation.responseRating > 0
    })

    // 设置评分
    const setRating = (type, rating) => {
      evaluation[type] = rating
    }

    // 获取评分文本
    const getRatingText = (rating) => {
      const texts = {
        0: '请评分',
        1: '非常不满意',
        2: '不满意', 
        3: '一般',
        4: '满意',
        5: '非常满意'
      }
      return texts[rating] || ''
    }

    // 切换标签
    const toggleTag = (tagValue) => {
      const index = evaluation.tags.indexOf(tagValue)
      if (index > -1) {
        evaluation.tags.splice(index, 1)
      } else {
        evaluation.tags.push(tagValue)
      }
    }

    // 设置打赏金额
    const setReward = (amount) => {
      evaluation.rewardAmount = amount
      evaluation.isCustomAmount = false
      evaluation.customAmount = 0
    }

    // 切换自定义金额
    const toggleCustomAmount = () => {
      evaluation.isCustomAmount = true
      evaluation.rewardAmount = 0
    }

    // 格式化日期
    const formatDate = (date) => {
      return dayjs(date).format('YYYY-MM-DD')
    }

    // 格式化金额
    const formatCurrency = (amount) => {
      return new Intl.NumberFormat('zh-CN').format(amount)
    }

    // 保存草稿
    const saveDraft = () => {
      ElMessage.success('评价草稿已保存')
    }

    // 提交评价
    const submitEvaluation = async () => {
      if (!canSubmit.value) {
        ElMessage.warning('请完成必填的评分项目')
        return
      }

      try {
        // 计算最终打赏金额
        const finalRewardAmount = evaluation.isCustomAmount ? 
          evaluation.customAmount : evaluation.rewardAmount

        const evaluationData = {
          caseId: caseInfo.id,
          overallRating: evaluation.overallRating,
          professionalRating: evaluation.professionalRating,
          serviceRating: evaluation.serviceRating,
          responseRating: evaluation.responseRating,
          comment: evaluation.comment,
          tags: evaluation.tags,
          wouldRecommend: evaluation.wouldRecommend,
          rewardAmount: finalRewardAmount
        }

        console.log('评价数据:', evaluationData)

        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1000))

        ElMessage.success('评价提交成功！感谢您的反馈')
        
        // 如果有打赏，显示支付确认
        if (finalRewardAmount > 0) {
          ElMessage.info(`将为律师打赏 ¥${finalRewardAmount}，请确认支付`)
        }

        // 跳转到案件列表或其他页面
        router.push('/client/case-timeline')
        
      } catch (error) {
        console.error('提交评价失败:', error)
        ElMessage.error('提交失败，请重试')
      }
    }

    return {
      caseInfo,
      evaluation,
      rewardAmounts,
      serviceTags,
      historyEvaluations,
      canSubmit,
      setRating,
      getRatingText,
      toggleTag,
      setReward,
      toggleCustomAmount,
      formatDate,
      formatCurrency,
      saveDraft,
      submitEvaluation
    }
  }
}
</script>

<style scoped>
.case-evaluation {
  background: #f8fafc;
  min-height: 100vh;
  padding: 24px;
}

/* 页面头部 */
.page-header {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.page-subtitle {
  color: #6b7280;
  margin: 0;
  font-size: 14px;
}

.case-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 500;
}

.case-status.completed {
  background: #dcfce7;
  color: #166534;
}

/* 案件摘要 */
.case-summary {
  margin-bottom: 24px;
}

.summary-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.case-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-item .label {
  font-weight: 500;
  color: #6b7280;
  min-width: 80px;
}

.info-item .value {
  color: #1f2937;
  font-weight: 500;
}

.case-result {
  padding: 20px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.result-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16px;
}

.result-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-label {
  color: #6b7280;
  font-weight: 500;
}

.result-value {
  font-weight: 600;
  color: #1f2937;
}

.result-value.success {
  color: #059669;
  font-size: 18px;
}

/* 评价表单 */
.evaluation-form {
  margin-bottom: 24px;
}

.form-card {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.form-title {
  font-size: 24px;
  font-weight: bold;
  color: #1f2937;
  margin: 0 0 32px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.rating-section,
.comment-section,
.tags-section,
.recommend-section,
.reward-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

.reward-section {
  border-bottom: none;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 星级评分 */
.star-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.star-item {
  font-size: 32px;
  color: #d1d5db;
  cursor: pointer;
  transition: all 0.2s ease;
}

.star-item:hover,
.star-item.active {
  color: #fbbf24;
  transform: scale(1.1);
}

.rating-text {
  font-size: 16px;
  font-weight: 500;
  color: #6b7280;
  margin-left: 16px;
}

/* 标签选择 */
.tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.tag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.tag-item:hover {
  border-color: #3b82f6;
  background: #f0f9ff;
}

.tag-item.selected {
  border-color: #3b82f6;
  background: #3b82f6;
  color: white;
}

/* 推荐选项 */
.recommend-options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.recommend-option {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.recommend-option input[type="radio"] {
  display: none;
}

.option-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  transition: all 0.2s ease;
  font-weight: 500;
}

.recommend-option:hover .option-content {
  border-color: #3b82f6;
  background: #f0f9ff;
}

.recommend-option input[type="radio"]:checked + .option-content {
  border-color: #3b82f6;
  background: #3b82f6;
  color: white;
}

/* 打赏功能 */
.reward-desc {
  color: #6b7280;
  margin-bottom: 20px;
  font-size: 14px;
}

.reward-options {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.reward-option {
  padding: 16px 24px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-width: 100px;
}

.reward-option:hover {
  border-color: #f59e0b;
  background: #fef3c7;
}

.reward-option.selected {
  border-color: #f59e0b;
  background: #f59e0b;
  color: white;
}

.reward-option.custom {
  border-color: #6b7280;
}

.reward-option.custom:hover {
  border-color: #374151;
  background: #f3f4f6;
}

.reward-option.custom.selected {
  border-color: #374151;
  background: #374151;
  color: white;
}

.amount {
  font-size: 16px;
  font-weight: 600;
}

.custom-amount {
  margin-bottom: 16px;
}

.reward-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #eff6ff;
  border-radius: 8px;
  color: #1e40af;
  font-size: 14px;
}

/* 操作按钮 */
.form-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
}

/* 历史评价 */
.history-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.history-title {
  font-size: 20px;
  font-weight: bold;
  color: #1f2937;
  margin: 0 0 20px 0;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-item {
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.case-number {
  font-weight: 600;
  color: #1f2937;
}

.case-type {
  color: #6b7280;
  margin-left: 8px;
}

.rating-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stars {
  display: flex;
  gap: 2px;
}

.stars .fas.fa-star {
  font-size: 14px;
  color: #d1d5db;
}

.stars .fas.fa-star.active {
  color: #fbbf24;
}

.rating-score {
  font-weight: 600;
  color: #1f2937;
}

.history-content .comment {
  color: #374151;
  line-height: 1.6;
  margin-bottom: 8px;
}

.history-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #6b7280;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .case-evaluation {
    padding: 16px;
  }

  .summary-card {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .form-card {
    padding: 24px;
  }

  .star-item {
    font-size: 28px;
  }

  .tags-grid {
    grid-template-columns: 1fr;
  }

  .reward-options {
    grid-template-columns: repeat(3, 1fr);
  }

  .form-actions {
    flex-direction: column;
  }

  .history-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>
